<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'

import pageContainer from '../../components/pageContainer.vue'
import addOrEdit from './addOrEdit.vue'
import { delTeamService, getTeamsInfoService } from '../../api/teams.ts'
import { useTeamsStore } from '../../stores/index.ts'

// const teamData = ref([
//   {
//     teamName: '成都AG超玩会',
//     teamLogo: '../../assets/images/teamAgLogo.png',
//     teamMembers: ['一诺', '钟意', '长生', '轩染', '大帅', 'Cat'],
//     teamSlogan: '心怀荣耀，勇往直前',
//     foundTime: '2016-9-15',
//   },
//   {
//     teamName: '重庆狼队',
//     teamLogo: '',
//     teamMembers: ['小胖', '道崽', '向鱼', '归期', '一笙'],
//     teamSlogan: '生而无畏，战至终章',
//   },
//   {
//     teamName: '济南RW侠',
//     teamLogo: '',
//     teamSlogan: '心不妥协，行不受限',
//     teamMembers: ['FLY', '晨风', '花云', '无双', '小A'],
//   },
//   {
//     teamName: '苏州KSG',
//     teamLogo: '',
//     teamMembers: ['FLY', '今屿', '妖刀', '流浪', '久酷'],
//     teamSlogan: '成梦姑苏，为梦而战',
//   },
//   {
//     teamName: '武汉EStarPro',
//     teamLogo: '',
//     teamMembers: ['坦然', '花海', '小玖', '清融', '子阳'],
//     teamSlogan: '永恒荣耀，不灭星辰',
//   },
//   {
//     teamName: '北京WB',
//     teamLogo: '',
//     teamSlogan: '荣耀加冕，追梦不休',
//     teamMembers: ['梓墨', '暖阳', '乔西', '花卷', '星宇'],
//   },
//   {
//     teamName: '杭州LGD.NBW',
//     teamLogo: '',
//     teamSlogan: '初心荣耀，百战成名',
//     teamMembers: ['小落', '赤辰', '小玖', '九尾', '小崽'],
//   },
//   {
//     teamName: '广州TTG',
//     teamLogo: '',
//     teamSlogan: '破浪乘风，粤上巅峰',
//     teamMembers: ['清清', '小白熊', '风萧', '紫幻', '帆帆'],
//   },
//   {
//     teamName: '佛山DRG',
//     teamLogo: '',
//     teamMembers: ['小度', '花海', '梦岚', '清融', '阿豆'],
//     teamSlogan: '激流勇进，破浪归',
//   },
//   {
//     teamName: '长沙TES',
//     teamLogo: '',
//     teamSlogan: '搏至无憾',
//     teamMembers: ['坦然', '不然', '小玖', '清融', '冰尘'],
//   },
//   {
//     teamName: '深圳DYG',
//     teamLogo: '',
//     teamSlogan: '巅峰之路，永无边界',
//     teamMembers: ['坦然', '夏玲', '钎城', '清融', '冰尘'],
//   },
//   {
//     teamName: '南京hero久竞',
//     teamLogo: '',
//     teamMembers: ['坦然', '夏玲', '钎城', '清融', '冰尘'],
//     teamSlogan: '英雄归来，久竞金陵',
//   },
//   {
//     teamName: '上海EDGM',
//     teamLogo: '',
//     teamMembers: ['小度', '初晨', 'Slivey', '一曲', '笑影'],
//     teamSlogan: '为爱而聚, E起前进',
//   },
// ])
const useTeams = useTeamsStore()
onMounted(() => {
  getTeamsList()
})
// 获取队伍列表
const teamsListInfo = ref()
const getTeamsList = async () => {
  const res = await getTeamsInfoService()
  teamsListInfo.value = res.data.data
}
// 添加
const dialog = ref()
const addTeam = () => {
  dialog.value.open({})
}
// 编辑
const editTeam = (row, $index) => {
  dialog.value.open(row)
}

// 删除队伍
const delTeam = async (row) => {
  await ElMessageBox.confirm('你确认删除该战队吗？', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  })
  await delTeamService(row.id)
  ElMessage.success('删除成功')
  getTeamsList()
}

const onSuccess = () => {
  getTeamsList()
}
</script>
<template>
  <el-card class="teamIntroduct">
    <el-row>
      <el-col :span="24">
        <div class="title grid-content ep-bg-purple-dark">Kpl年度最受欢迎俱乐部</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24"
        ><div class="grid-content ep-bg-purple-dark">
          成都AG超玩会
          <div class="containerPic">
            <img src="../../assets/images/teamAgLogo.png" alt="" />
          </div></div
      ></el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content ep-bg-purple">荣誉榜首</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content ep-bg-purple">
          <SvgIcon iconName="icon-guanjun" style="margin-right: 5px"></SvgIcon>
          重庆狼队
          <div class="containerPic">
            <img src="../../assets/images/teamAgLogo.png" alt="" />
          </div>
        </div>
      </el-col>
    </el-row>
  </el-card>
  <pageContainer title="队伍管理">
    <template #extra>
      <el-button type="primary" @click="addTeam">添加队伍</el-button>
    </template>
    <el-table v-loading="loading" :data="teamsListInfo" border style="width: 100%">
      <el-table-column type="index" label="序号" width="100" />
      <el-table-column label="战队名称" prop="teamName"></el-table-column>
      <el-table-column label="队标" prop="logo"> </el-table-column>
      <el-table-column label="成员" prop="members"></el-table-column>
      <el-table-column label="口号" prop="slogan"></el-table-column>
      <el-table-column label="排名" prop="rank"></el-table-column>
      <el-table-column label="成立时间" prop="creationDate"></el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template #default="{ row, $index }">
          <el-button
            type="primary"
            plain
            @click="editTeam(row, $index)"
            :icon="Edit"
            circle
          ></el-button>
          <el-button type="danger" plain :icon="Delete" circle @click="delTeam(row, $index)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <addOrEdit ref="dialog" @success="onSuccess"></addOrEdit>
  </pageContainer>
</template>

<style lang="scss" scope>
.el-table .cell {
  text-align: center;
}
.teamIntroduct {
  width: 500px;
  margin-bottom: 20px;
  .el-row {
    margin-bottom: 20px;
  }
  .el-row:last-child {
    margin-bottom: 0;
  }
  .el-col {
    background-color: rgb(249, 253, 255);

    border-radius: 4px;
  }
  .title {
    width: 100px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .containerPic {
    width: 100px;
    height: 100px;
    img {
      display: block;
      width: 75px;
      height: 75px;
    }
  }
}
</style>
